<template>
	<view class="">
		<view class="bg">
			<view class="sign_pic">
				<image :src="Url+'mine/integral/sign01.png'" mode=""></image>
				<view class="sign_content">
					<view class="day">
						已累计签到1天
					</view>
					<view class="num">
						<i class="icon">&#xe626;</i>
						<text>10</text>
						积分
					</view>
					<view class="sure" @tap="change">
						<image :src="Url+'mine/integral/sign02.png'" mode=""></image>
						<view class="success">
							签到成功
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data () {
			return {
				Url:this.Imgurl
			}
		},
		methods: {
			change () {
				this.$emit('changeflag')
			}
		}
	}
</script>

<style lang="less" scoped>
	.bg {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background-color: rgba(0,0,0,.3);
		.sign_pic {
			width: 591upx;
			height: 782upx;
			position: absolute;
			left: 50%;
			top: 40%;
			transform: translate(-50%,-50%);
			image {
				width: 100%;
				height: 100%;
			}
			.sign_content {
				position: absolute;
				width: 100%;
				left: 50%;
				bottom: 60upx;
				transform: translate(-50%);
				display: flex;
				flex-direction: column;
				align-items: center;
				.day {
					font-size: 32upx;
					color: #FFFFFF;
				}
				.num {
					font-size: 28upx;
					color: #FFFFFF;
					margin: 30upx 0;
					position: relative;
					padding-left: 30upx;
					.icon {
						font-size: 32upx;
						color: #FFFFFF;
						margin-top: -20upx;
						position: absolute;
						left: 0;
						top: 60%;
						// transform: translateY(-50%);
					}
					text {
						font-size: 60upx;
						font-weight: bold;
						margin: 0 10upx;
					}
				}
				.sure {
					width: 351upx;
					height: 93upx;
					position: relative;
					image {
						width: 100%;
						height: 100%;
					}
					.success {
						position: absolute;
						left: 50%;
						transform: translate(-50%);
						top: 20upx;
						font-size: 28upx;
						color: #333333;
					}
				}
			}
		}
	}
</style>
